/// 主题预编译

$themes: (
  dark: (
    $bgc: #000,
    $color: #fff,
  ),
  light: (
    $bgc: #fff,
    $color: #000,
  ),
);

$curTheme: "light";

// 定义一个mixin，用于使用主题
@mixin useTheme() {
  @at-root html {
    font-size: clamp(12px, calc(7px + 0.390625vw), 24px);
  }

  // 遍历$themes中的每一个键值对
  @each $key, $value in $themes {
    // 将当前主题赋值给$curTheme，并设置为全局变量
    $curTheme: $key !global;
    // 当html的data-theme属性等于当前主题时，执行@content
    html[data-theme="#{key}"] & {
      @content;
    }
  }
}

// 定义一个函数，用于获取主题中的参数值
@function getVal($paramName) {
  // 获取当前主题的映射
  $themeMap: map-get($themes, $curTheme);
  // 返回当前主题中指定参数的值
  @return map-get($themeMap, $paramName);
}

//example
// .item {
//   width: 200px;
//   height: 200px;
//   @include useTheme {
//     background: getVal("$bgc");
//     color: getVal("$color");
//   }
// }
